import React from "react"

interface ProgressBarProps {
  value: number // 0-100
  height?: number
  backgroundColor?: string
  barColor?: string
  borderRadius?: number
  width?: string
}

const ProgressBar: React.FC<ProgressBarProps> = ({
  value,
  height = 8,
  backgroundColor = "rgb(175, 176, 179)",
  barColor = "rgb(0, 102, 204)",
  borderRadius = 4,
  width = "100%",
}) => {
  return (
    <div
      style={{ width, height, backgroundColor, borderRadius }}
      className="relative overflow-hidden"
    >
      <div
        style={{
          width: `${value}%`,
          height: "100%",
          backgroundColor: barColor,
          borderRadius,
          transition: "width 0.3s",
        }}
      />
    </div>
  )
}

export default ProgressBar
